<template>
  <div>
     <h1>我是子组件</h1>
     <h1>props的数据:{{myname}}</h1>
     <h1 v-for="(item ,index) in mylist">
      {{item}}
     </h1>
      <h1>{{$attrs.sex}}</h1>
      <h1>{{$attrs.myhobby}}</h1>
        <h1>{{$attrs.year}}</h1>
        <!--经常接收到的attrs v-bind="$attrs"完全直接继承绑定给其他组件  -->
        <!-- v-on 可以将$listeners 继续继承给子组件 -->
         <!-- 一个写好的组件 -->
        <div v-bind="$attrs" v-on="$listeners">
            将父组件传来的数据 直接绑定到元素或组件
        </div>
        <h1>根实例的数据:{{$root.total}}</h1>
       <h1 v-for="(val,key,index) in obj" :key="key">
         {{key}}----{{val}}
       </h1>
        <button @click="add">新增数据</button>
        <button @click="todel">删除</button>
  </div>
</template>
<script>
// this.$attrs 接收父组件传来的 除props之外的数据

export default {
   props:{
    myname:{
      type:String,
      default:""
    },
    mylist:{
      type:Array,
      default:()=>[]
    }
   },
   data(){
     return{
       obj:{
        name:"廊坊",
        people:"1000万",
        sex:"男"
       }
     }
   },
   mounted(){
    // 经常用来做二次封装的继承
    console.log(this.$attrs)

    // this.$root  获取根实例 在main.js中new Vue实例
    this.$root.run()

    // this.$listeners  获取父组件传来的事件
    console.log(this.$listeners,"---")
     this.$emit("sendMsg","你好父组件")
   },
   methods:{
     add(){
      //vue2一次性将data数据监听完毕 对象和数组新增的属性页面无法及时响应式
      // 解决方案1: this.$set(对象,属性名,属性值)
      // 解决方案2: this.$forceUpdate()强制更新页面
      this.obj.year=2020;
      // this.$set(this.obj,"year",2020)//this.$set()
      //  this.$forceUpdate()强制更新页面
      // 当写出需要刷新 页面的bug时候可以用
       this.$forceUpdate()//强制更新页面

    },
    todel(){
      // this.$delete方法 删除data中对象的属性
      
      this.$delete(this.obj,'people')
    }
   }
}
</script>